<template>
    <div v-if="catalog != null" id="container">
        <div id="catalog-title">{{catalog.name}}</div>
        <hr />
        <div id="target-container">
            <ItemTarget :target="target" :key="index" @pop="onPop(target)" v-for="(target, index) in targets" />
        </div>
    </div>
    <div v-else>
        <span>Click catalog bar</span>
    </div>
</template>

<script>
import ItemTarget from "@/components/ItemTarget";

export default {
    data: function() {
        return {
            targets: [
                {
                    target_id: 1,
                    name: "Google",
                    icon: "none",
                    default_link: {
                        type: 1,
                        name: "Adam's Twitter",
                        uri: "https://google.com"
                    },
                    more_link: [{}],
                    description: "Most best search engine"
                },
                {
                    target_id: 2,
                    name: "Google",
                    icon: "https://www.google.com/favicon.ico",
                    default_link: {},
                    more_link: [{}],
                    description: "Search engine"
                },
                {
                    target_id: 1,
                    name: "Google",
                    icon: "https://www.google.com/favicon.ico",
                    default_link: {},
                    more_link: [{}],
                    description: "Most best search engine"
                },
                {
                    target_id: 2,
                    name: "Google",
                    icon: "https://www.google.com/favicon.ico",
                    default_link: {},
                    more_link: [{}],
                    description: "Search engine"
                },
                {
                    target_id: 1,
                    name: "Google",
                    icon: "https://www.google.com/favicon.ico",
                    default_link: {},
                    more_link: [{}],
                    description: "Most best search engine"
                },
                {
                    target_id: 2,
                    name: "Google",
                    icon: "https://www.google.com/favicon.ico",
                    default_link: {},
                    more_link: [{}],
                    description: "Search engine"
                }
            ]
        };
    },
    props: ["catalog"],
    components: {
        ItemTarget
    },
    methods: {
        onPop: function(target) {
            console.log('Container onPop')
            console.log(target);
            this.$emit('pop', target);
        }
    },
};
</script>

<style scoped>
#catalog-title {
    letter-spacing: 0.2em;
    font-size: 2em;
    font-weight: 600;
}

#target-container {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    box-sizing: border-box;
}

#container {
    width: 100%;
    min-height: 80vh;
    background-color: white;
    padding: 10px;
    border-radius: 18px;
    margin: 20px;
    box-shadow: 1px 1px 5px #bbbbbb;

    user-select: none;
}
</style>
